html,body,div,img,ul,li,a{margin: 0;padding: 0;border: none;outline: none;-webkit-tap-highlight-color:rgba(0,0,0,0);}
ul{list-style: none;}
a{text-decoration: none;cursor: pointer;color: #333;-webkit-tap-highlight-color:rgba(0,0,0,0);}
a:hover,a:focus,a:visited{outline: none;text-decoration: none;}
a, abbr, acronym, address, applet, article, aside, audio, b, blockquote, big, body, center, canvas, caption, cite, code, command, datalist, dd, del, details, dfn, dl, div, dt, em, embed, fieldset, figcaption, figure, font, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, keygen, label, legend, li, meter, nav, object, ol, output, p, pre, progress, q, s, samp, section, small, span, source, strike, strong, sub, sup, table, tbody, tfoot, thead, th, tr, tdvideo, tt, u, ul, var {
    background: transparent none repeat scroll 0 0;
    border: 0 none;
    font-size: 100%;
    margin: 0;
    padding: 0;
    vertical-align: baseline;

}

html,body{width: 100%;height: 100%;overflow: hidden;}
html{background-color: #f5f5f5;}
body{position:relative;max-width: 640px;min-width: 320px;overflow: auto;margin: 0 auto;box-shadow: 0 0 10px 0 rgba(0,0,0,.2);-webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,.2);  -moz-box-shadow: 0 0 10px 0 rgba(0,0,0,.2);  -o-box-shadow: 0 0 10px 0 rgba(0,0,0,.2);}
@media screen and (min-width:789px) {
    body{max-height: 1024px;}
}
.main{width: 100%;height: 100%;overflow: hidden;position: relative;}
#loading,#popping{position: absolute;top:0;left:0; bottom:0;right:0;z-index:100;text-align: center;}
#loading .load1{height:auto;max-height: 100%;width: 100%;background-color: #000;}
#loading .load2{position: absolute;bottom:10%;width: 80%;max-width:220px;left:50%;transform: translateX(-50%);-webkit-transform: translateX(-50%);-moz-transform:translateX(-50%);}
#popping{background: rgba(0,0,0,0.7);padding: 8% 5%;display: none;overflow: hidden;}
#pop_1{width: 100%;height: 100%;background-repeat: no-repeat;background-size: contain;background-image:url(h5_img/pop/pop_4.png);}
#pop{width:90%;height:90%;position:absolute;top:50%;left:50%;background-image:url(h5_img/pop/pop_4.png) ;
    background-position:center center;background-repeat: no-repeat;background-size: contain;transform: translate(-50%,-50%);-webkit-transform: translate(-50%,-50%);-moz-transform: translate(-50%,-50%);}
#popButton{display:block;cursor: pointer;left: 50%;bottom:0;-webkit-tap-highlight-color:rgba(0,0,0,0);}
.pop-btn1{width:35%;padding-top: 10%;margin-bottom: 21.5%;}
.pop-btn2{width:66%;padding-top: 18%;margin-bottom: 12%;}
#popClose{position: absolute;background:url(h5_img/close.png) no-repeat center/contain;right:8%;top:1%;width: 10%;height: 10%;cursor: pointer;}

.fixed{position: absolute;left:50%;transform: translateX(-50%);-webkit-transform: translateX(-50%);-moz-transform:translateX(-50%);}
.fixed-top{top:0;margin-top: 5%; width: 72%;max-width: 427px;}
.fixed-bottom{bottom:0;margin-bottom: 5%;width: 32%;max-width: 400px;}
#music{position: absolute;right:0;top:0;margin-top: 3%;margin-right:3%;max-width:33px;width: 10%;padding-top: 10%;z-index: 10;}
.music_1{background: url(h5_img/music_1.png) no-repeat center/contain;}
.music{background: url(h5_img/music.png) no-repeat center/contain;}
#popButton,.title{position: absolute;transform: translateX(-50%);-webkit-transform: translateX(-50%);-moz-transform: translateX(-50%); }


.bg,.bg img,.slide-right,.slide-content,.slide-mask,.load-fade{position: absolute;}
.bg{top: 50%;height: 150%;}
.bg,.slide-content p{left: 50%;transform: translate(-50%,-50%);-webkit-transform: translate(-50%,-50%);-moz-transform: translate(-50%,-50%);}
.bg #background{height: 100%;position: static;}
.title{cursor: pointer;}
.word{position:absolute;width: 800px;font-size: 14px;color: #6fccde;}
.word p{position:absolute;left:0;top:0;line-height: 1.8;width: auto;}
.word p:nth-child(2){top:25px;}
.word p:nth-child(3){top:50px;}
.word p:nth-child(4){top:25px;display: none;}
.word .p2{padding-left: 6%;}
.p_word2{display: none;}
/*base code*/
.animated {
    -webkit-animation-fill-mode: none;
    animation-fill-mode: forwards;
    /*animation-iteration-count: infinite;*/

    -webkit-animation-timing-function:linear;
    animation-timing-function:linear;
}
.animated.infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}
.animated.six {
    -webkit-animation-iteration-count: 6;
    animation-iteration-count: 6;
}

.animated.hinge_1 {  -webkit-animation-duration: 0.3s;  animation-duration: 0.3s;  }
.animated.hinge_2 {  -webkit-animation-duration: 1.5s;  animation-duration: 1.5s;  }
.animated.hinge_2s {  -webkit-animation-duration: 2s;  animation-duration: 2s;  }
.animated.hinge_3 {  -webkit-animation-duration: 2.5s;  animation-duration: 2.5s;  }
.animated.hinge_4 {  -webkit-animation-duration: 4.5s;  animation-duration: 4.5s;  }
.animated.hinge_5 {  -webkit-animation-duration: 6s;  animation-duration: 6s;  }
.animated.hinge_15 {  -webkit-animation-duration: 15s;  animation-duration: 15s;  }


@-webkit-keyframes b_to_t {
    0%,50%, 100%{ -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0)  }
    25%{   -webkit-transform: translate3d(0, -11%, 0); transform: translate3d(0, -11%, 0)  }
    75% {  -webkit-transform: translate3d(0, 11%, 0); transform: translate3d(0, 11%, 0)  }
}
@keyframes b_to_t {
    0%,50%, 100%{ -webkit-transform: translate3d(0, 0, 0);  -ms-transform: translate3d(0, 0, 0);  transform: translate3d(0, 0, 0)  }
    25%{   -webkit-transform: translate3d(0, -11%, 0);  -ms-transform: translate3d(0, -11%, 0);  transform: translate3d(0, -11%, 0)  }
    75% {  -webkit-transform: translate3d(0, 11%, 0);  -ms-transform: translate3d(0, 11%, 0);  transform: translate3d(0, 11%, 0)  }
}
.b_to_t{-webkit-animation-name: b_to_t;  animation-name: b_to_t; }
/*波纹*/
.scaleout {
    -webkit-animation: scaleout 1.0s infinite ease-in-out;
    animation: scaleout 1.0s infinite ease-in-out;
}

@-webkit-keyframes scaleout {
    0% { -webkit-transform: scale(1.0) ;  opacity: 1;}
    100% {
        -webkit-transform: scale(1.4);
        opacity: 0;
    }
}
@keyframes scaleout {
    0% {
        transform: scale(1.0);
        -webkit-transform: scale(1.0);
        opacity: 1;
    } 100% {
          transform: scale(1.4);
          -webkit-transform: scale(1.4);
          opacity: 0;
      }
}
/*旋转*/
@-webkit-keyframes anim3 {
    0%{ -webkit-transform: rotateZ(0deg); transform: rotateZ(0deg)  }
    50%{   -webkit-transform: rotateZ(180deg); transform: rotateZ(180deg)  }
    100% {  -webkit-transform: rotateZ(360deg);   transform: rotateZ(360deg)  }
}
@keyframes anim3 {
    0%{ -webkit-transform: rotateZ(0deg);  -ms-transform: rotateZ(0deg);  transform: rotateZ(0deg)  }
    50%{   -webkit-transform: rotateZ(180deg);  -ms-transform: rotateZ(180deg);  transform: rotateZ(180deg)  }
    100% {  -webkit-transform: rotateZ(360deg);  -ms-transform: rotateZ(360deg);  transform: rotateZ(360deg)  }
}
.anim3{-webkit-animation-name: anim3;  animation-name: anim3; -webkit-transform-origin: right bottom;  -ms-transform-origin: right bottom;  transform-origin: right bottom}




/*旋转*/
@-webkit-keyframes rotation {
    10%,100%,90% {
        transform: rotate(90deg);
        -webkit-transform: rotate(90deg)
    }

    50%,60% {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg)
    }
}

@keyframes rotation {
    10%,100%,90% {
        transform: rotate(90deg);
        -webkit-transform: rotate(90deg)
    }

    50%,60% {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg)
    }
}

#orientLayer {
    display: none;
    z-index: 999999
}
/*横屏时，提示*/
@media all and (orientation:landscape) {
    #orientLayer {
        display: block
    }
}

.mod-orient-layer {
    display: none;
    position: fixed;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: #000;
    z-index: 9997
}

.mod-orient-layer__content {
    position: absolute;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
    text-align: center
}

.mod-orient-layer__icon-orient {
    background-image: url();
    display: inline-block;
    width: 100px;
    height: 163px;
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -webkit-animation: rotation infinite 1.5s ease-in-out;
    animation: rotation infinite 1.5s ease-in-out;
    background-size: 100px;
}

.mod-orient-layer__desc {
    margin-top: 20px;
    font-size: 20px;
    color: #fff
}